import { ReactNode } from "react";
import { StyleProp, TextStyle, ViewStyle } from "react-native";

/**
 * @typedef {Object} MenuItemConfig - 菜单项配置对象
 * @description 定义单个菜单项的所有属性，支持嵌套子菜单
 *
 * @example
 * ```tsx
 * // 基本菜单项
 * const menuItem: MenuItemConfig = {
 *   id: "settings",
 *   label: "设置",
 *   icon: "settings-outline",
 *   onPress: "设置"
 * };
 *
 * // 带子菜单的项目
 * const menuWithChildren: MenuItemConfig = {
 *   id: "share",
 *   label: "分享",
 *   icon: "share-outline",
 *   children: [
 *     { id: "wechat", label: "微信", icon: "logo-wechat", onPress: "分享到微信" }
 *   ]
 * };
 * ```
 */
export interface MenuItemConfig {
  /** 菜单项唯一标识符 */
  id: string;
  /** 菜单项显示的文本 */
  label: string;
  /** 图标名称 (基于Ionicons) */
  icon?: string;
  /** 图标颜色 */
  iconColor?: string;
  /** 文本颜色 */
  color?: string;
  /** 点击动作 - 可以是字符串标识符或回调函数 */
  onPress?: string | (() => void);
  /** 子菜单项 - 支持多级嵌套 */
  children?: MenuItemConfig[];
  /** 是否禁用此菜单项 */
  disabled?: boolean;
}

/**
 * @typedef {Function} IconRenderer - 图标渲染器函数类型
 * @description 用于自定义渲染菜单项图标
 *
 * @example
 * ```tsx
 * // 自定义Ionicons渲染
 * const customIconRenderer: IconRenderer = (name, size, color, style) => (
 *   <Ionicons name={name as any} size={size} color={color} style={style} />
 * );
 *
 * // 使用FontAwesome图标
 * const fontAwesomeRenderer: IconRenderer = (name, size, color, style) => (
 *   <FontAwesome name={name} size={size} color={color} style={style} />
 * );
 * ```
 */
export type IconRenderer = (
  iconName: string,
  size: number,
  color: string,
  style?: any
) => ReactNode;

/**
 * @enum {string} MenuPosition - 菜单相对于触发元素的位置
 * @description 定义菜单弹出的位置，相对于触发元素
 *
 * @example
 * ```tsx
 * // 在触发元素下方显示
 * position={MenuPosition.BOTTOM}
 *
 * // 在触发元素右上角显示
 * position={MenuPosition.TOP_RIGHT}
 * ```
 */
export enum MenuPosition {
  /** 在触发元素上方居中 */
  TOP = "top",
  /** 在触发元素下方居中 */
  BOTTOM = "bottom",
  /** 在触发元素左侧居中 */
  LEFT = "left",
  /** 在触发元素右侧居中 */
  RIGHT = "right",
  /** 在触发元素上方，左对齐 */
  TOP_LEFT = "top-left",
  /** 在触发元素上方，右对齐 */
  TOP_RIGHT = "top-right",
  /** 在触发元素下方，左对齐 */
  BOTTOM_LEFT = "bottom-left",
  /** 在触发元素下方，右对齐 */
  BOTTOM_RIGHT = "bottom-right",
  /** 完全自定义位置 */
  CUSTOM = "custom",
}

/**
 * @typedef {Object} MenuProps - Menu组件的属性接口
 * @description 定义Menu组件所有可配置的属性
 *
 * @example
 * ```tsx
 * // 基于配置的使用方式
 * <Menu
 *   visible={menuVisible}
 *   onClose={() => setMenuVisible(false)}
 *   items={MENU_ITEMS}
 *   position={MenuPosition.BOTTOM}
 *   triggerRef={buttonRef}
 *   onItemPress={handleItemPress}
 * />
 *
 * // 使用children的方式
 * <Menu
 *   visible={menuVisible}
 *   onClose={() => setMenuVisible(false)}
 *   position={MenuPosition.BOTTOM}
 *   triggerRef={buttonRef}
 * >
 *   <MenuItem label="设置" onPress={() => {}} />
 *   <MenuItem label="关于" onPress={() => {}} />
 * </Menu>
 * ```
 */
export interface MenuProps {
  // 数据相关
  /** 菜单项配置数组，用于配置式菜单 */
  items?: MenuItemConfig[];
  /** React children，用于手动构建菜单内容 */
  children?: ReactNode;

  // 状态控制
  /** 是否显示菜单 */
  visible: boolean;
  /** 关闭菜单的回调函数 */
  onClose: () => void;

  // 位置相关
  /** 菜单相对于触发元素的位置 */
  position?: MenuPosition;
  /** 触发元素的引用，用于计算菜单位置 */
  triggerRef?: React.RefObject<any>;
  /** 触发元素的布局信息，可以代替triggerRef */
  triggerLayout?: { x: number; y: number; width: number; height: number };
  /** 菜单位置的偏移量 */
  offset?: { x: number; y: number };

  // 样式相关
  /** 菜单容器样式 */
  containerStyle?: StyleProp<ViewStyle>;
  /** 菜单项样式 */
  itemStyle?: StyleProp<ViewStyle>;
  /** 菜单项文本样式 */
  itemTextStyle?: StyleProp<TextStyle>;
  /** 菜单宽度 */
  width?: number;
  /** 菜单背景色 */
  backgroundColor?: string;
  /** 是否显示阴影 */
  showShadow?: boolean;

  // 行为相关
  /** 选择菜单项后是否自动关闭菜单 */
  closeOnSelect?: boolean;

  // 自定义渲染
  /** 默认图标颜色 */
  iconColor?: string;
  /** 自定义图标渲染函数 */
  renderIcon?: IconRenderer;
  /** 菜单项点击回调 */
  onItemPress?: (item: MenuItemConfig) => void;
}

/**
 * @typedef {Object} MenuItemComponentProps - MenuItem组件的属性接口
 * @description 定义单个菜单项组件的属性
 *
 * @example
 * ```tsx
 * // 基本使用
 * <MenuItem
 *   label="设置"
 *   leftIcon={<Ionicons name="settings-outline" size={20} color="#333" />}
 *   onPress={() => console.log('设置被点击')}
 * />
 *
 * // 自定义样式
 * <MenuItem
 *   label="删除"
 *   color="#e63946"
 *   leftIcon={<Ionicons name="trash" size={20} color="#e63946" />}
 *   style={{ borderTopWidth: 1, borderTopColor: '#f0f0f0' }}
 * />
 * ```
 */
export interface MenuItemComponentProps {
  // 基本属性
  /** 菜单项显示的文本 */
  label?: string;
  /** 点击回调函数 */
  onPress?: () => void;
  /** 是否禁用此菜单项 */
  disabled?: boolean;

  // 样式相关
  /** 菜单项容器样式 */
  style?: StyleProp<ViewStyle>;
  /** 菜单项文本样式 */
  textStyle?: StyleProp<TextStyle>;
  /** 文本颜色 */
  color?: string;

  // 图标相关
  /** 左侧图标组件 */
  leftIcon?: ReactNode;
  /** 右侧图标组件 */
  rightIcon?: ReactNode;

  // 子元素(完全自定义内容)
  /** 自定义子元素，将替代默认渲染 */
  children?: ReactNode;
}
